<!-- 自定义弹窗输入框组件 -->
<!-- 收费设置组件 -->
<!-- prompt组件 -->
<!-- prompt -->
<template>
  <view class="prompt-box" :hidden="isHidden">
    <view class="prompt-content contentFontColor">
      <view class="prompt-title">{{ title }}</view>
      <!-- 名称 -->
      <input
        class="prompt-input"
        :maxlength="maxlength"
        :max="maxMoney"
        @input="_input"
        v-model="charge"
        v-if="title == '请输入赞赏金额'"
        :placeholder="'赞赏金额不可超过' + maxMoney + '元'"
      />
      <input
        class="prompt-input"
        type="text"
        @input="_input1"
        :value="blessing"
        v-if="title == '请输入祝福语'"
      />
      <view class="prompt-btn-group">
        <view class="btn-item" @tap="_cancel">取消</view>
        <view class="btn-item last-btn" @tap="_confirm">确定</view>
      </view>
    </view>
  </view>
</template>
<script>
var input;
var content;
export default {
  data() {
    return {
      multipleSlots: true, // 在组件定义时的选项中启用多slot支持
      isHidden: true,
      charge: "", //输入金额
      maxlength: 6,
      blessing: "", //输入祝福语
    };
  },
  props: {
    title: {
      type: String,
      default: "提示",
    },
    maxMoney: {
      type: String,
      default: "",
    },
  },
  updata() {
    console.log(this.maxMoney);
  },
  methods: {
    hide: function () {
      this.isHidden = true;
    },
    show(e) {
      this.isHidden = false;
      if (e != null && e != undefined && e != "") {
        this.text = e;
      }
    },
    /*
     * 内部私有方法建议以下划线开头
     * triggerEvent 用于触发事件
     */

    _confirm() {
      if (this.title == "请输入赞赏金额") {
        this.$emit("onConfirm", this.charge);
        if (Number(this.charge) > Number(this.maxMoney)) {
          this.charge = this.maxMoney;
        }
        input = this.charge;
      } else {
        this.$emit("onConfirm1", this.blessing);
        content = this.blessing;
      }
    },
    _cancel() {
      this.hide();
      this.charge = input || "";
      this.blessing = content || "";
    },
    _input(e) {
      this.$nextTick(() => {
        if (
          e.detail.value &&
          e.detail.value.search(/[^\d{1,}\d{1,}|\d{1,}]/g) != -1
        ) {
          e.detail.value = 0;
        }
        e.detail.value =
          e.detail.value &&
          e.detail.value.replace(/[^\d{1,}\d{1,}|\d{1,}]/g, "");
        if (e.detail.value == 0) {
          setTimeout(() => {
            this.maxlength = -1;
            this.charge = "";
          }, 10);
        }
        if (e.detail.value[0] == 0) {
          setTimeout(() => {
            this.maxlength = -1;
            this.charge = "";
          }, 10);
        }
        this.maxlength = this.maxMoney.length;
        // let str = '' + e.detail.value
        //       if (str.indexOf('.') != -1) {
        //         let arr = str.split('')
        //         arr.splice(arr.length - 1)
        //         let str2 = arr.join('')
        //         this.charge = +str2
        // 	  }
        if (!/^\d+$/.test(this.charge)) {
          this.charge = "";
        }
        if (Number(this.charge) > Number(this.maxMoney)) {
          this.charge = this.maxMoney;
        }
      });
    },
    _input1(e) {
      this.blessing = e.detail.value;
    },
  },
};
</script>

<style>
/* components/vas-prompt/vas-prompt.wxss */
.prompt-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  background: rgba(0, 0, 0, 0.4);
}

.prompt-content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #fff;
}

.prompt-title {
  width: 100%;
  /* padding: 20rpx; */
  padding: 20rpx 0;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid #eee;
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.prompt-input {
  margin: 8%;
  padding: 10rpx 15rpx;
  width: 80%;
  height: 85rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
}
.textarea {
  width: 520rpx;
  height: 320rpx;
  background: rgba(248, 248, 250, 1);
  border-radius: 8rpx;
  margin: 30rpx auto;
  position: relative;
}
.textarea text {
  display: inline-block;
  position: absolute;
  font-size: 22rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(204, 204, 204, 1);
  line-height: 30rpx;
  bottom: 16rpx;
  right: 12rpx;
}
.prompt-textarea {
  width: 100%;
  height: 100%;
  padding: 14rpx 22rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(70, 70, 70, 1);
  line-height: 40rpx;
}
.prompt-btn-group {
  display: flex;
  height: 100rpx;
  border-top: 1rpx solid rgba(221, 221, 221, 1);
}

.btn-item {
  width: 50%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: white;
  font-size: 36rpx;
  /* font-family:PingFangSC-Regular,PingFang SC; */
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  text-align: center;
}
.last-btn {
  color: #2168eb;
  border-left: 2rpx solid #eee;
}
</style>

